<template>
	<!--home.wxml-->
	<view>
		<view class="evaluation" v-for="(item, index) in products" :key="item.productId">
			<view class="my-orders-shop-item-detail">
				<view class="my-orders-shop-item-detail-item">
					<view class="my-orders-shop-item-detail-item-left">
						<image class="my-orders-shop-item-detail-item-left-img" :src="item.productSquareUrl" />
						<view class="my-orders-shop-item-detail-item-left-txt">
							<view class="my-orders-shop-item-detail-item-left-title">{{ item.productName }}
							</view>
							<view class="my-orders-shop-item-detail-item-left-desc">{{ item.desc_1 }}</view>
							<view class="my-orders-shop-item-detail-item-left-desc">{{ item.desc_2 }}</view>
						</view>
					</view>
					<view class="my-orders-shop-item-detail-item-right">
						<view class="my-orders-shop-item-detail-item-right-money">￥{{ item.price }}</view>
						<view class="my-orders-shop-item-detail-item-right-cnt">x{{ item.count }}</view>
					</view>
				</view>
			</view>
			<view>
				<view class="desc">
					<span class="desc_title">描述相符</span><uni-rate @change="(e) => change(e, index)" :touchable="false"
						:value="item.type" />
				</view>
				<view class="content">
					<textarea placeholder="评价宝贝，可以帮助更多想买的人。" class="textarea" v-model="item.content"></textarea>
					<uni-file-picker limit="9" v-model="item.filePathsList" :auto-upload="false" file-mediatype="image"
						mode="grid" fileMediatype="image" @select="(res) => handleSelect(res, index)"
						@delete="(err) => handleDelete(err, index)">
						<image class="add_pic" src='../../static/img/common/add_pic.png' />
					</uni-file-picker>
				</view>
			</view>
		</view>
		<button @click="toSubmit" class="submit" type="primary">提交评价</button>
	</view>
</template>

<script>
import Big from 'big.js';
import {
	mapState,
} from "vuex";
import { orderDetail } from '../../api/order.js';
import { BASE_URL } from '../../utils/request.js';
import { navigateBack, showModal, showToast } from '../../utils/promise.js';
import { evaluationSave } from '../../api/evaluation.js';
export default {
	data() {
		return {
			value: 5,
			filePathsList: [],
			content: '',
			expressAmount: 0,
			totalCount: 0,
			orderDetail: {},
			products: []
		}
	},
	components: {
	},
	computed: {
		...mapState(["userToken", "userInfo"]),
	},
	mounted() {
	},
	onLoad() {
	},
	methods: {
		onLoad(params) {
			params.orderNo && this.getOrderDetail(params.orderNo);
		},
		getOrderDetail(orderNo) {
			let params = {
				orderNo: orderNo
			}
			orderDetail(params).then((res) => {
				const {code, data, msg} = res
				if (code === 200) {
					let temp = 0;
					data.createTime = new Date(data.createTime * 1000).Format("yyyy-MM-dd HH:mm:ss");
					data.totalAmount = new Big(data.totalAmount).div(100);
					data.expressAmount = new Big(data.expressAmount).div(100);
					data.products.forEach((e) => {
						e.filePathsList = [];
						e.type = 5;
						temp += e.count;
						e.content = '';
						e.price = new Big(e.price).div(100);
					});
					if (data.shipTime !== null) {
						data.shipTime = new Date(data.shipTime * 1000).Format("yyyy-MM-dd HH:mm:ss");
					}
					this.expressAmount = data.expressAmount;
					this.totalCount = temp;
					this.orderDetail = data;
					this.products = data.products;
				}
			})
		},
		async handleSelect(res, index) {
			await this.uploadImg(res.tempFilePaths, index);
		},
		async uploadImg(tempFilePaths, index) {
			if (!tempFilePaths.length) return;  //如果没有选择图片就退出
			const userToken = uni.getStorageSync("userToken")
			//循环选择图片的张数
			tempFilePaths.map(async () => {
				const path = tempFilePaths.pop();
				//因为我这个后台给的接口一次只能上传一张图片，所以每循环一次就调用接口上传一次
				let header = {
					Authorization: `Bearer ${userToken}`,
					'X-Client-Type': 'MINI_PROGRAM'
				}
				const [err, { data }] = await uni.uploadFile({
					url: `${BASE_URL}/api/file/upload`,//后台地址
					filePath: path,
					//todo 需要判断状态
					header: header,
					formData: {
						'fileClassification': 'COMMENT',//可以附带的属性，我这里是用户的id
					},
					name: 'file',
				});
				//因为async返回的是个promise对象，所以要把返回的数据转为对象格式。
				let dataObj = JSON.parse(data)
				//每循环一次就把后台返回的图片地址添加到filePathsList数组
				this.products[index].filePathsList.push({
					url: dataObj.data,
					name: ""
				})
			})
			this.uploadImg(tempFilePaths, index);
		},
		toSubmit() {
			let data = [];
			this.products.forEach((e) => {
				let images = [];
				e.filePathsList.forEach((e) => {
					images.push(e.url);
				});
				let avatar = '';
				if (this.userInfo.avatar) {
					avatar = this.userInfo.avatar;
				}
				this.userInfo.avatar
				data.push({
					type: e.type,
					content: e.content,
					images: images.join(),
					orderNo: this.orderDetail.orderNo,
					productId: e.productId,
					productName: e.productName,
					userName: this.userInfo.nickname,
					avatar
				})
			});
			showModal({
				title: '是否确认提交评价',
				confirmText: '确认',
			}).then((res) => {
				if(res.cancel) {
					return
				}
				evaluationSave({
					data: data
				}).then((res) => {
					if (res.code === 200) {
						showToast({
							title: '评价成功',
							icon: 'none'
						});
						navigateBack()
					} else {
						showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			})
			// console.log(data);
		},
		handleDelete(err, index) { // 删除图片
			//todo 全删除
			const num = this.products[index].filePathsList.findIndex(v => v.url === err.tempFilePath);
			this.products[index].filePathsList.splice(num, 1);
		},
		change(e, index) {
			this.products[index].type = e.value;
		},
	}
}
</script>

<style scoped>
.evaluation {
	padding: 40rpx 41rpx 130rpx;
}

.textarea {
	width: 100%;
	height: 100rpx;
}

.content {
	background-color: #F8F8F8;
	padding: 15rpx;
}

.desc {
	display: flex;
	margin-bottom: 15rpx;
}

.add_pic {
	width: 100%;
	height: 100%;
}

.desc_title {
	margin-right: 50rpx;
}

.submit {
	width: 100%;
	position: fixed;
	bottom: 0;
	height: 130rpx;
	line-height: 130rpx;
	background-color: rgba(242, 85, 0, 1);
}

.my-orders-shop-item-detail {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.my-orders-shop-item-detail-item {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 20rpx;
}

.my-orders-shop-item-detail-item-left {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
}

.my-orders-shop-item-detail-item-left-img {
	width: 185rpx;
	height: 181rpx;
	flex: 0 0 185rpx;
}

.my-orders-shop-item-detail-item-right {
	text-align: right;
	line-height: 50rpx;
	margin-right: 30rpx;
}

.my-orders-shop-item-detail-item-right-money {
	font-size: 28rpx;
	color: rgba(242, 85, 0, 1);
}

.my-orders-shop-item-detail-item-right-cnt {
	font-size: 24rpx;
	color: #999;
}

.my-orders-shop-item-detail-item-left-txt {
	margin-left: 10rpx;
}

.my-orders-shop-item-detail-item-left-title {
	width: 377rpx;
	color: #333;
	font-size: 24rpx;
	color: rgba(51, 51, 51, 1);
	line-height: 36rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.my-orders-shop-item-detail-item-left-desc {
	color: #666;
	font-size: 24rpx;
	line-height: 36rpx;
	word-break: break-all;
}
</style>